<template>
    <div class="welcome-page">
        <div class="w welcome-info">
            <div>
                <img class="welcome-png" src="@/assets/main/login/welcome-bg.png" />
                <div class="title">
                    <text>SHD</text>
                    <span>Smart HC Disparych</span>
                </div>
                <div class="text-info">
                    计划好你要做的事情，以便今天、明天和以后更有条理
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="login-button" @click="goPage('login')">登录</div>
            <div class="register-button" @click="goPage('register')">注册</div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        goPage(routerName) {
            this.$router.push({ name: routerName });
        }
    }
}
</script>

<style lang="scss" scoped>
.welcome-page {
    height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    @extend .u-s-n;

    .welcome-info {
        height: calc(100% - 150px);
        @extend .f-c, .a-i-c, .w;

        &>div {

            .welcome-png {
                width: 40vh;
                height: 40vh;
            }

            text {
                font-size: 32px;
                font-weight: 400;
                color: rgba(91, 103, 202, 1);
                text-align: center;
                display: inline-block;
                width: 100%;
                margin-top: 30px;
                margin-bottom: -10px;
            }

            span {
                margin-top: -10px;
                /** 文本1 */
                font-size: 12px;
                zoom: 0.6;
                font-weight: 400;
                letter-spacing: 0px;
                color: rgba(91, 103, 202, 1);
                width: 100%;
                text-align: center;
                display: inline-block;
            }


            .text-info {
                font-size: 14px;
                font-weight: 400;
                margin-top: 30px;
                color: rgba(44, 64, 110, 1);
                text-align: center;
                vertical-align: top;
            }

        }




    }

    .footer-bottom {
        position: absolute;
        width: 100%;
        height: 140px;
        bottom: 0px;

        padding: 0 26px;
        box-sizing: border-box;

        .login-button {
            border-radius: 14px;
            line-height: 52px;
            height: 52px;
            background: rgba(91, 103, 202, 1);
            box-shadow: -3px 7px 13px 0px rgba(241, 247, 255, 1);
            color: rgba(255, 255, 255, 1);
            text-align: center;
        }

        .register-button {
            margin-top: 30px;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 5px;
            line-height: 0px;
            color: rgba(91, 103, 202, 1);
            text-align: left;
            vertical-align: top;
            text-align: center;
        }
    }
}
</style>